<li
  class="tree-item"
  @contextmenu.prevent.stop="showLayerMenu(layerstree, $event)"
  @click="select()"
  :class="{selected: !isFolder || !isTable ? layerstree.selected : false, itemmarginbottom: !isFolder,  disabled: isDisabled}">
  <span v-if="isFolder"
    :class="[{bold : isFolder}, layerstree.expanded ? g3wtemplate.getFontClass('arrow-down') : g3wtemplate.getFontClass('arrow-right')]"
    @click="expandCollapse"
    class="root">
  </span>
  <span v-if="isFolder"
    @click.stop="toggle(true)"
    style="color: #ffffff"
    :class="[triClass()]">
  </span>
  <span v-else-if="isTable"
        v-show="!layerstree.hidden"
        :class="[parentFolder ? 'child' : 'root', g3wtemplate.getFontClass('table')]">
  </span>
  <template v-else>
    <span style="color: red" v-if="layerstree.external && layerstree.removable"
          :class="g3wtemplate.getFontClass('trash')"
          @click="removeExternalLayer(layerstree.name)">
    </span>
    <span style="color: #ffffff; margin-left: 5px;" v-if="layerstree.external && layerstree.download"
          :class="g3wtemplate.getFontClass('download')"
          @click="downloadExternalLayer(layerstree.download)">
    </span>
    <span v-show="!layerstree.hidden"
      @click.stop="toggle(false)"
      :class="[layerstree.checked  ? g3wtemplate.getFontClass('check'): g3wtemplate.getFontClass('uncheck'),  parentFolder ? 'child' : 'root' ]"
      class="checkbox-layer"></span>
  </template>

  <span v-show="!layerstree.hidden || isFolder"
    class="tree-node-title"
    :class="{'disabled': layerstree.disabled, 'bold': isFolder, 'highlightlayer': isHighLight }"> {{ layerstree.title }}
  </span>

  <ul v-if="isFolder" v-show="layerstree.expanded">
    <tristate-tree
      :root="false"
      :highlightlayers="highlightlayers"
      :parentFolder="isFolder"
      :layerstree="_layerstree"
      :storeid="storeid"
      :parent="layerstree"
      :parent_mutually_exclusive="!!layerstree.mutually_exclusive"
      v-for="_layerstree in layerstree.nodes" :key="layerstree.id">
    </tristate-tree>
  </ul>
</li>
